<template>
  <layout
    :loading="loading"
    :error="error"
    :error-message="errorMsg"
    :layout-style="layoutStyle"
  >
    <tab>
      <category />
      <seascape />
      <banner />
      <feed />
    </tab>
    <bottom-bar />
  </layout>
</template>

<script>
import { getHomeData, getToken } from '@/utils/api'
import cookie from '@/utils/cookie'
import Tab from './components/Tab.vue'
import Category from './components/Category.vue'
import Seascape from './components/Seascape.vue'
import Banner from './components/Banner.vue'
import Feed from './components/Feed1.vue'
import BottomBar from './components/BottomBar.vue'

export default {
  name: 'Home',
  components: {
    Tab,
    Category,
    Seascape,
    Banner,
    Feed,
    BottomBar
  },
  data() {
    return {
      loading: true,
      error: false,
      errorMsg: '',
      layoutStyle: {
        background: 'url("https://fast-learn-oss.youbaobao.xyz/tb/bg.png") no-repeat',
        backgroundSize: '100% 557px'
      }
    }
  },
  beforeMount() {
    const formData = new FormData()
    const msg = {
      grant_type: 'password',
      username: 'admin',
      password: '123456',
      client_id: 'goods',
      client_secret: 'secret'
    }
    for (const key in msg) {
      formData.append(key, msg[key])
    }
    getToken(formData).then((res) => {
      if (res.access_token) {
        cookie.setCookie('token', res.access_token)
        console.log('token' + res.access_token)
      }
    }).catch((err) => {
      console.log('接口获取失败，失败信息：', err.message)
    })
  },
  mounted() {
    getHomeData()
      .then((res) => {
        this.loading = false
        this.error = false
        this.$store.dispatch('SET_HOME', res)
      })
      .catch((err) => {
        this.loading = false
        this.error = false
        this.errorMsg = err.message
      })
  }
}
</script>

<style>
.text {
  font-size: 30px;
}
</style>
